<template>
  <div v-if="page" class="home-container bg-white">
    <div v-if="isNewUser" class="user-container">
      <header class="head-title text-center">请选择您的肢体障碍类型</header>
      <section class="nav-block d-flex flex-wrap jc-between">
        <div class="nav-item" v-for="(item,index) in userTagList" :key="item.name" @tap="userTypeId = item.id">
          <div :class="[{'active-item':userTypeId === item.id },'icon-block']" class="flex-c bg-white">
            <img :style="{width:item.w+'rpx', height:item.h+'rpx'}"
                 :src="userTypeId === item.id ? '/static/icon/'+item.aicon+'.png' :'/static/icon/'+item.icon+'.png'">
          </div>
          <h1 class="nav-name text-center">{{item.name}}</h1>
        </div>
      </section>
      <footer class="footer-block">
        <button :class="[{'disable-sty':userTypeId === ''},'confirm-btn','mt-7']" open-type="getUserInfo"
                @getuserinfo="handleGetUserInfo">确认</button>
      </footer>
    </div>
    <div v-else class="type-container">
      <header class="head-title text-center">请选择您要上传的地点类型</header>
      <section class="nav-block d-flex flex-wrap jc-between">
        <div class="nav-item" v-for="item in userFacilityList" :key="item.name" @tap="handleToSelectLocation(item.id)">
          <div class="site-type-i icon-block bg-white">
            <img :src="item.icon.url">
          </div>
          <h1 class="nav-name text-center">{{item.name}}</h1>
        </div>
      </section>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import QQMapWX from "@/libs/qqmap-wx-jssdk.min"; //改源码 export default QQMapWX
let MapSdk;
export default {
  data() {
    return {
      page: false,
      userTypeId: ""
    };
  },
  computed: {
    ...mapGetters(['openid', 'userTagList', 'userFacilityList']),
    isNewUser() {
      return !this.$store.getters.isGetUserInfo
    }
  },
  async mounted() {
    // 获取残障类型tags
    this.userTagList.length ? '' : await this.$store.dispatch('upload/GetUserTagList')
    // 获取无障碍设施分类列表
    this.userFacilityList.length ? '' : await this.$store.dispatch('upload/GetFacilityList')
    this.page = true;
  },
  methods: {
    // 确认用户障碍类型
    async handleGetUserInfo(e) {
      const userinfo = e.mp.detail.userInfo
      if (!userinfo) return;
      if (this.userTypeId) {
        const { retCode, msg } = await this.$http.updateUserInfo({
          wxOpenId: this.openid,
          isDisbility: this.userTypeId !== 1 ? true : false,
          disbilityTagId: this.userTypeId,
          nickName: userinfo.nickName,
          avatarUrl: userinfo.avatarUrl,
          gender: userinfo.gender,
          province: userinfo.province,
          city: userinfo.city,
          country: userinfo.country,
          language: userinfo.language
        })
        this.$store.commit('user/SET_USER_INFO', userinfo)
        if (retCode === 0) {
          this.$store.state.user.isGetUserInfo = true
        } else {
          this.$tip.error("上传失败");
        }
      } else {
        this.$tip.toast("请选择肢体障碍类型");
      }
    },
    // 调用地图搜索地点
    async handleToSelectLocation(id) {
      MapSdk = new QQMapWX({
        key: "VFCBZ-4ZP6U-ZS5VO-BORMM-EFHA3-NCFK6"
      });
      this.$store.state.upload.uploadTypeId = id;

      const location = await this.$native.ChooseLocation();
      if (!location) return
      const { result } = await this.getDefAreaData(location)

      if (location) {
        this.$store.state.upload.uploadLocationInfo = { ...location, ...(result.address_component) };
        this.$router.push({ path: "/pages/upload/uploadInfo" });
      }
    },
    getDefAreaData(location) {
      return new Promise(resolve => {
        MapSdk.reverseGeocoder({
          location: `${location.latitude},${location.longitude}`,
          success(res) {
            resolve(res)
          }
        });
      });
    },
  },
  onShareAppMessage() {
    return this.$shareDefInfo;
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
@import "@/styles/index.scss";
.home-container {
  @include wh(100vw, 100vh);
  .head-title {
    padding-top: 68rpx;
  }
  .nav-block {
    width: 100vw;
    padding: 57rpx 50rpx 0;
    .nav-item {
      margin-bottom: 44rpx;
      .icon-block {
        @include wh(300rpx, 304rpx);
        border-radius: 80rpx;
        border: 1rpx solid $green;
      }
      .site-type-i {
        border-color: transparent;
      }
      .active-item {
        transition: all 0.15s ease;
        background: $green;
        border-color: $green;
      }
      .nav-name {
        padding-top: 17rpx;
      }
    }
  }
  .footer-block {
    .confirm-btn {
      @include active-btn(560rpx, 100rpx);
    }
    .disable-sty {
      background: #9adda6;
    }
  }
}
</style>









